<!DOCTYPE html>
<html>
  <head>
    <title>Immybox Demo</title>
    <link rel='stylesheet' type='text/css' href='http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css'>
    <link rel='stylesheet' type='text/css' href='immybox.css'>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='jquery.immybox.min.js'></script>
    <style type='text/css'>
      /* yanked from bootstrap demos: http://getbootstrap.com/examples/jumbotron-narrow/ */

      /* Space out content a bit */
      body {
        padding-top: 20px;
        padding-bottom: 20px;
      }

      /* Everything but the jumbotron gets side spacing for mobile first views */
      .header,
      .marketing,
      .footer {
        padding-left: 15px;
        padding-right: 15px;
      }

      /* Custom page header */
      .header {
        border-bottom: 1px solid #e5e5e5;
      }
      /* Make the masthead heading the same height as the navigation */
      .header h3 {
        margin-top: 0;
        margin-bottom: 0;
        line-height: 40px;
        padding-bottom: 19px;
      }

      /* Custom page footer */
      .footer {
        padding-top: 19px;
        color: #777;
        border-top: 1px solid #e5e5e5;
      }

      /* Customize container */
      @media (min-width: 768px) {
        .container {
          max-width: 730px;
        }
      }
      .container-narrow > hr {
        margin: 30px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        text-align: center;
        border-bottom: 1px solid #e5e5e5;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 40px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }

      /* Responsive: Portrait tablets and up */
      @media screen and (min-width: 768px) {
        /* Remove the padding we set earlier */
        .header,
        .marketing,
        .footer {
          padding-left: 0;
          padding-right: 0;
        }
        /* Space out the masthead */
        .header {
          margin-bottom: 30px;
        }
        /* Remove the bottom border on the jumbotron for visual effect */
        .jumbotron {
          border-bottom: 0;
        }
      }

      /* fix immybox arrow url for demo */
      .immybox.immybox_witharrow {
        background-image: url(immybox-arrow.png);
      }

      dd {
        margin-bottom: 1em;
      }

    </style>

    <script type='text/javascript'>
      $(function() {

        // simple example
        $('#input1').immybox({
          choices: [
            {text: 'Alabama', value: 'AL'},
            {text: 'Alaska', value: 'AK'},
            {text: 'Arizona', value: 'AZ'},
            {text: 'Arkansas', value: 'AR'},
            {text: 'California', value: 'CA'},
            {text: 'Colorado', value: 'CO'},
            {text: 'Connecticut', value: 'CT'},
            {text: 'Delaware', value: 'DE'},
            {text: 'Florida', value: 'FL'},
            {text: 'Georgia', value: 'GA'},
            {text: 'Hawaii', value: 'HI'},
            {text: 'Idaho', value: 'ID'},
            {text: 'Illinois', value: 'IL'},
            {text: 'Indiana', value: 'IN'},
            {text: 'Iowa', value: 'IA'},
            {text: 'Kansas', value: 'KS'},
            {text: 'Kentucky', value: 'KY'},
            {text: 'Louisiana', value: 'LA'},
            {text: 'Maine', value: 'ME'},
            {text: 'Maryland', value: 'MD'},
            {text: 'Massachusetts', value: 'MA'},
            {text: 'Michigan', value: 'MI'},
            {text: 'Minnesota', value: 'MN'},
            {text: 'Mississippi', value: 'MS'},
            {text: 'Missouri', value: 'MO'},
            {text: 'Montana', value: 'MT'},
            {text: 'Nebraska', value: 'NE'},
            {text: 'Nevada', value: 'NV'},
            {text: 'New Hampshire', value: 'NH'},
            {text: 'New Jersey', value: 'NJ'},
            {text: 'New Mexico', value: 'NM'},
            {text: 'New York', value: 'NY'},
            {text: 'North Carolina', value: 'NC'},
            {text: 'North Dakota', value: 'ND'},
            {text: 'Ohio', value: 'OH'},
            {text: 'Oklahoma', value: 'OK'},
            {text: 'Oregon', value: 'OR'},
            {text: 'Pennsylvania', value: 'PA'},
            {text: 'Rhode Island', value: 'RI'},
            {text: 'South Carolina', value: 'SC'},
            {text: 'South Dakota', value: 'SD'},
            {text: 'Tennessee', value: 'TN'},
            {text: 'Texas', value: 'TX'},
            {text: 'Utah', value: 'UT'},
            {text: 'Vermont', value: 'VT'},
            {text: 'Virginia', value: 'VA'},
            {text: 'Washington', value: 'WA'},
            {text: 'West Virginia', value: 'WV'},
            {text: 'Wisconsin', value: 'WI'},
            {text: 'Wyoming', value: 'WY'}
          ]
        });

      });
    </script>
  </head>
  <body>
    <div class='container'>
      <div class='header'>
        <ul class='nav nav-pills pull-right'>
          <li class='active'><a href="#">Demo</a></li>
          <li><a href='https://github.com/immense/immybox'>Code</a></li>
        </ul>
        <h3 class='text-muted'>Immybox</h3>
      </div>
      <div class='jumbotron'>
        <h1>Immybox Demo</h1>
      </div>
      <div class='row'>
        <div class='col-md-12'>

          <h2>Simple example</h2>
          <p>Call <code>.immybox()</code> on any <code>input[type=text]</code> element, and pass in some choices.</p>

<pre>
$('#input1').immybox({
  choices: [
    {text: 'Alabama', value: 'AL'},
    {text: 'Alaska', value: 'AK'},
    ...
    {text: 'Wisconsin', value: 'WI'},
    {text: 'Wyoming', value: 'WY'}
  ]
})</pre>

          <h3>Result:</h3>
          <input id='input1' type='text' class='form-control'>

          <h2>Options</h2>
          <p>You can customize the behavior of immybox using the following options:</p>
          <dl class='dl-horizontal'>
            <dt><code>choices</code></dt>
            <dd>An array of choice objects used to populate the autocomplete list. Each object should have at least <code>text</code> and <code>value</code> properties. Default: <code>[]</code></dd>

            <dt><code>maxResults</code></dt>
            <dd>The maximum number of choices to show in the autocomplete list. Default: <code>50</code></dd>

            <dt><code>showArrow</code></dt>
            <dd>Show a small down arrow on the right side of the input. Default: <code>true</code></dd>

            <dt><code>openOnClick</code></dt>
            <dd>Should the results list show on click, or wait for user input before showing. Default: <code>true</code></dd>

            <dt><code>filterFn</code></dt>
            <dd>A function for determining whether or not a choice matches the entered query. Accepts <code>query</code> as arguments and must return a function that takes <code>choice</code> as argument and returns a boolean. Default function case insensitive "contains" matching.</dd>

            <dt><code>formatChoice</code></dt>
            <dd>A function for formatting choices. It expects two arguments: <code>choice</code> and <code>query</code> and is expected to return a string (optionally containing HTML). The default formatter just returns <code>choice.text</code>, possibly underlining the parts of it that match <code>query</code>.
          </dl>

        </div>
      </div>
      <div class='footer'>
        <p>&copy; Immense Networks 2013</p>
      </div>
    </div>
  </body>
</html>
